interface PointInfo {
  cx: string;
  cy: string;
}
interface AnchorInfo {
  left: PointInfo;
  right: PointInfo;
  top: PointInfo;
  bottom: PointInfo;
  isInside: boolean;
  showAnchor?: Function;
}

export default function Anchor(props: AnchorInfo) {
  const { left, right, top, bottom, isInside, showAnchor } = props;
  return (
    <g style={{ visibility: isInside ? "visible" : "hidden" }}>
      <circle
        {...left}
        fill="black"
        r="4"
        onClick={(e) => console.log(e.target)}
        onMouseEnter={() => showAnchor}
      ></circle>
      <circle {...top} fill="black" r="4"></circle>
      <circle {...right} fill="black" r="4"></circle>
      <circle {...bottom} fill="black" r="4"></circle>
    </g>
  );
}
